<template>
  <section class="card-box card-two">
      <div class="card-header">
        <CardTitle :title="'报道摘编 2021-08-15'" @showCalendar="setOpenPicker"></CardTitle>
      </div>

       <div class="card-content">
          <div class="txt-wrapper">
            <h3>跟着总书记走好生态致富路</h3>
            <section class="txt-subtxt">
              <span class="datetime-txt">8月15日刊发</span>
              <span class="star-box">
                <Star :activeNum="3"></Star>
              </span>
            </section>
            <section class="txt-content">
              <p>笔试试卷密封进行判卷，阅卷人与我无冤无仇，不会故意少给我几分，多给别人几分。可能确实“天外有天，人外有人”，按照通过率来折合成绩，我这自以为考得不错的也被更优秀的人甩在后边了。</p>
              <p>乐观来看，就差一分，说明我答得也不是特别差。从检验自己学习成果的角度来说，69分总好得过59、49吧！有时候心态还是很重要的，难过也是69，开心也是69，还不如开心一点接受它！</p>
              <p>我现在难过郁闷，作用也不是很大了。虽然可以申请复核，但一来过程复杂，二来能找回分的可能性也不是很大。我这种怕麻烦的人，也就放弃了。但如果屏幕前的小伙伴对成绩有异议，完全可以申请复核，毕竟申请复核是每一位考生的权力。 </p>
            </section>
            <section class="txt-about-link">
              <h4>相关链接</h4>
              <ul class="link-list">
                <li>联播+ | 跟着总书记走好生态致富路</li>
                <li>跟着总书记走好生态致富路</li>
              </ul>
            </section>
          </div>
       </div>

       <div class="card-footer">
         <CardFooter></CardFooter>
       </div>

       <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm" class="cdatePicker"></mt-datetime-picker>

  </section>
</template>

<script>
import CardTitle from '&/components/card-title/index.vue'
import CardFooter from '&/components/card-foot/index.vue'
import Star from '&/components/star-box/index.vue'

export default {
  name:'wechat-card-four',
  data(){
    return {
      pickerValue: new Date(),
    }
  },
  created(){

  },  
  methods:{
    handleConfirm(v){
      console.log(v)
    },
    setOpenPicker(){
      
      // document.querySelector('.v-modal').style.position = 'absolute';
      this.$refs.picker.$el.style.position = 'absolute';
      this.$refs.picker.open();
      let t = setInterval(() => {
        // console.log(this.$refs.picker.$el)
       if(this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal').length > 0){
         this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal')[0].style.display = 'none';
         window.clearInterval(t);
       }
      },30);
    }
  },
  computed:{

  },
  components:{
    CardTitle,
    CardFooter,
    Star
  }
}
</script>

<style scoped lang="scss">
  
  @import "&/assets/css/index.scss";

  .card-box{
    width:100%;height:100%;background-color:#fff;position:relative;overflow:hidden;
    /* card-content */
    .card-content{
      width:100%;height:calc(100% - 150px);margin-top:10px;background-color:#fff;position:relative;
      .txt-wrapper{
        width:calc(100% - 32px);height:100%;margin:0 auto;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;padding:0 20px;-webkit-overflow-scrolling: touch;
        h3{width:100%;height:40px;line-height:40px;font-size:20px;font-weight: 500;margin:0;}
        .txt-subtxt{
          width:100%;height:40px;line-height:40px;display:flex;flex-wrap:nowrap;justify-content: space-between;
          .datetime-txt{font-size:12px;color:#b2b2b2;}
        }
        /* txt-content */
        .txt-content{
          border-bottom:1px solid #efefef;padding-bottom:20px;
          p{ text-indent:2em;line-height:30px;color:#777;font-size: 16px;}
        }
        /* txt-about-link */
        .txt-about-link{
          margin-top:5px;
          h4{ height:40px; line-height:40px; font-size:16px; margin:0;}
          .link-list{
            width:100%;list-style: none;padding:0;margin:0;
            li{ 
              height:26px; line-height: 26px; cursor: pointer;font-size:15px;
              &:hover{ text-decoration: underline; }
            }
          }
        }
      }
    }

    /* card-more */
    .card-footer{
      width:100%;height:pxToRem(45px);position:fixed;left:0;bottom:0;
      // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
    }

    /deep/.mint-datetime-action{color:#c9242b;}
  }
</style>